<template>
  <NewCard title="收银台" isright="isright">
      <template slot="right">
          <span class="hintRight">请在 14:39 内完成支付，超时订单自动取消</span>
      </template>
      <div class="pay">
        <div class="pay_main">
            <el-card shadow="never">
                <h3>{{currentDetail.title}}</h3>
                <p>发送格式：PDF</p>
                <p>应付问金：20.00</p>
            </el-card>
            <el-row>
                <el-col :span="12">
                    <p class="inputTitle">电邮 <span>(将本内容以PDF的形式分享至对方邮箱)</span></p>
                    <el-input v-model="email" placeholder="请输入对方邮箱"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <p class="inputTitle">接收信息</p>
                    <el-input v-model="acceptEmail" placeholder="请输入邮箱">
                        <button slot="suffix" class="acceptEmail">换绑邮箱</button>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-tabs type="card" v-model="activeName">
                        <el-tab-pane label="问金支付" name="askGold">
                            <ul class="askGold">
                                <li>
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    <div class="askInfo">
                                        <div>
                                            <h3>刘易阳 (我是圈主)</h3>
                                            <p>余额：10问金 <span>余额不足 <el-button round size="mini">充值</el-button></span></p>
                                        </div>
                                        <el-radio v-model="askRadio" label="1" disabled></el-radio>
                                    </div>
                                </li>
                                <li>
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    <div class="askInfo">
                                        <div>
                                            <h3>曹建国</h3>
                                            <p>余额：24400问金</p>
                                        </div>
                                        <el-radio v-model="askRadio" label="2"></el-radio>
                                    </div>
                                </li>
                                <li>
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                    <div class="askInfo">
                                        <div>
                                            <h3>赵祯</h3>
                                            <p>余额：2350问金</p>
                                        </div>
                                        <el-radio v-model="askRadio" label="3"></el-radio>
                                    </div>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="扫码支付" name="scanQr">
                            <div class="scanQr">
                                <img src="~@/assets/images/er.png" alt="">
                                <p>应付金额：¥20.00</p>
                                <span>支持微信 / 支付宝 / 云支付扫码支付</span>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </div>
        <div class="payBtn">
            <p>应付金额：<span>￥20.00</span></p>
            <el-button round>立即支付</el-button>
        </div>
      </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
export default {
    name:'Pay',
    components:{NewCard},
    props:['currentDetail','listActive'],
    data(){
        return{
            isright:true,//显示时间提示支付
            email:'',//电邮
            acceptEmail:'12345678@wensanshi.cn',//接收邮箱
            activeName:'askGold',//默认显示问金支付
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",//头像
            askRadio:'2',
        }
    },
}
</script>

<style scoped>
.hintRight{
    font-size: 12px;
    color: #999;
}
::v-deep .el-card__body{
    position: relative;
}
/* 支付信息 */
.pay_main{
    margin-bottom: 70px;
}
.pay_main .el-card{
    border-radius: 12px;
}
::v-deep .pay_main .el-card__body{
    padding: 20px;
}
.pay_main h3{
    margin: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.pay_main p{
    font-size: 14px;
    color: #999;
    margin: 0;
    line-height: 24px;
}
.pay_main .el-row{
    margin-top: 40px;
}
::v-deep .pay_main .el-row .el-input__inner{
    border-radius: 8px;
    height: 44px;
    line-height: 44px;
}
.pay_main .el-row .acceptEmail{
    border: 0;
    padding: 5px 0;
    margin: 7px 0;
    margin-right: 10px;
    font-size: 14px;
    color: #BABABA;
    background: #fff;
    cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover{
    color: #f87a23;
    
}
.pay_main .inputTitle{
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
.pay_main .inputTitle span{
    font-size: 14px;
    color: #999;
    font-weight: 400;
}
::v-deep .pay_main .el-tabs__header{
    border: 0;
    margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 0;
}
::v-deep .pay_main .el-tabs__item{
    width: 49%;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 0;
    background-color: #FAFAFA;
}
::v-deep .pay_main .el-tabs__item.is-active{
    background-color: #F1F3FF;
    color: #39486F;
}
::v-deep .pay_main .el-tabs__item:hover{
    color: #39486F;
}

.askGold{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.askGold li{
    display: flex;
    margin-bottom: 24px;
}
.askGold li .el-avatar{
    margin-right: 14px;
}
.askGold .askInfo h3{
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}
.askGold .askInfo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ECEDF0;
    padding-bottom: 24px;
}
.askGold .askInfo p{
    font-size: 12px;
    color: #666;
}
.askGold .askInfo button{
    color: #39486F;
    border-color: #39486F;
    padding: 5px 15px;
}
::v-deep .askInfo .el-radio__label{
    display: none;
}
::v-deep .askInfo .el-radio .el-radio__inner{
    width: 24px;
    height: 24px;
    border-color: #BBBBBB;
    background: #fff;
}
::v-deep .askInfo .el-radio .is-disabled .el-radio__inner{
    background: #F2F2F2;
}
::v-deep .askInfo .el-radio .is-checked .el-radio__inner{
    border-color: #f87a23;
    background: #f87a23;
}
::v-deep .askInfo .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width:11px;
    height: 7px;
    border: 3px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 6px;
    left: 5px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;  
}
.payBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ECEDF0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
}
.payBtn p{
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}
.payBtn p>span{
    color: #f87a23;
    font-size: 16px;
}
.payBtn .el-button{
    background-color: #f87a23;
    border-color: #f87a23;
    color: #fff;
    font-size: 14px;
    padding: 10px 50px;
}
.payBtn .el-button:hover{
    opacity: 0.9;
}

.scanQr{
    text-align: center;
}
.scanQr img{
    width: 150px;
}
.scanQr p{
    color: #f87a23;
    font-size: 18px;
    font-weight: bold;
}
.scanQr span{
    font-size: 12px;
    color: #999;
}
</style>